<template>
  <view class="">
    <swiper class="swiper" circular :interval="5000" :duration="500">
      <swiper-item v-for="(item, index) in carousel" :key="index">
        <u-image width="100%" :src="item.img_url"></u-image>
      </swiper-item>
    </swiper>
    <view class="commodity_box">
      <urCard>
        <text class="headline padLine">{{ $t("index.ManagedServices") }}</text>
        <view class="module_box">
          <view
            v-for="(item, index) in moduleList"
            :key="index"
            class="table_cell"
            @click="choseModule(item, index)"
          >
            <u-image :src="item.img_url" width="60rpx" height="60rpx" />
            <text>{{ item.title }}</text>
          </view>
        </view>
      </urCard>
    </view>

    <Tabbar cureentPage="index"></Tabbar>
  </view>
</template>

<script>
import { carouseList } from "@/api/api.js";
import {
  adminOutPut,
  adminOrder,
  adminClient,
  more,
} from "@/common/config/userFileImg.js";
import Tabbar from "@/common/tabbar/tabbar.vue";
import urCard from "@/components/urcard.vue";
export default {
  data() {
    return {
      moduleList: [
        {
          title: this.$t("common.InAndOutOfStorage"),
          img_url: adminOutPut,
        },
        {
          title: this.$t("common.Orders"),
          img_url: adminOrder,
        },
        {
          title: this.$t("common.CustomerManagement"),
          img_url: adminClient,
        },
        {
          title: this.$t("index.More"),
          img_url: more,
        },
      ],
      carousel: [
        {
          img_url: "https://test.91nongjia.com/static/image/cmputerFirst.jpg",
        },
        {
          img_url: "https://test.91nongjia.com/static/image/cmputerSecond.jpg",
        },
        {
          img_url: "https://test.91nongjia.com/static/image/cmputerThree.jpg",
        },
        {
          img_url: "https://test.91nongjia.com/static/image/cmputerFour.jpg",
        },
      ],
    };
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t("index.Manage"),
    });
    this.getCarouseList();
  },
  components: {
    Tabbar,
    urCard,
  },
  methods: {
    getCarouseList() {
      carouseList().then((res) => {
        // this.carousel = res.data
        console.log(res.data, "15451215514   item.img_url");
      });
    },
    choseModule(item, index) {
      console.log(index, "44444");
      switch (index) {
        case 0:
          uni.reLaunch({
            url: "/pages/management/index",
          });
          break;
        case 1:
          uni.reLaunch({
            url: "/pages/warehouse/index",
          });
          break;
        case 2:
          uni.navigateTo({
            url: "/pages/subpackage/clientele/clientAdmin",
          });
          break;
        case 3:
          uni.showToast({
            title: "待开发",
            duration: 2000,
            icon: "none",
          });
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.commodity_box {
  margin: auto;
  margin-top: 36rpx;
  padding: 0 20rpx;
}

.module_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table_cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  font-size: 24rpx;
}

.padLine {
  padding: 20rpx 0 30rpx 0;
}

.headline {
  font-weight: bold;
  font-size: 28rpx;
  color: #333;
}
</style>